<template>
	<div style="padding:10px;">
		<div class="listCell">
			<div style="width:170rpx;">用户名</div>
			<div style="color:lightgray">{{ formData.username }}</div>
		</div>
		<div class="listCell">
			<div style="width:170rpx;">姓名</div>
			<input v-model="formData.name" :disabled="!flagShowEdit" maxlength="4" />
		</div>
		<div class="listCell">
			<div style="width:170rpx;">性别</div>
			<div @tap="changeSex()">
				男
				<radio :checked="formData.sex === 1" :disabled="!flagShowEdit" style="margin:0 10rpx;" />
				女
				<radio :checked="formData.sex === 2" :disabled="!flagShowEdit" style="margin:0 10rpx;" />
			</div>
		</div>
		<div class="listCell">
			<div style="width:170rpx;">手机</div>
			<input v-model="formData.phone" :disabled="!flagShowEdit" maxlength="11" placeholder="请输入您的手机号码"/>
		</div>
		<div class="listCell">
			<div style="width:170rpx;">收货地址</div>
			<textarea v-model="formData.address" :disabled="!flagShowEdit" maxlength="100" placeholder="请输入您的收货地址" style="width: 500rpx; height:120rpx;" />
		</div>
		<!-- #ifdef MP-WEIXIN  -->
		<div style="margin-top: 5rpx;"><button size="mini" type="primary" @tap="updateUserAvatar">同步微信头像</button></div>
		<!-- #endif -->

		<div style="text-align:center; margin-top:20px;">
			<button v-if="flagShowEdit" size="mini" style="margin-right: 15rpx;" @tap="cancelUpdate()">取消</button>
			<button v-if="flagShowEdit" type="primary" size="mini" @tap="updateUserInfo()">提交更新</button>
			<button v-if="!flagShowEdit" size="mini" @tap="flagShowEdit = true">编辑</button>
		</div>
		<div style="text-align:center; position: absolute; bottom: 150rpx; width: 100%;"><button type="warn" size="mini" @tap="logout()">退出登录</button></div>
	</div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import * as userApi from '../../api/userApi.js';
export default {
	data() {
		return {
			flagShowEdit: false,
			formData: {},
			userInfo: {}
		};
	},
	mounted() {
		this.getUserInfo()
	},
	methods: {
		// 拉取最新用户信息
		getUserInfo(){
			userApi.getUserInfo({
				success: res => {
					this.formData = res.data
					this.userInfo = res.data
					uni.setStorageSync("userInfo", res.data)
				}
			})
		},
		// 修改性别
		changeSex() {
			if (this.flagShowEdit) {
				this.formData.sex = this.formData.sex === 1 ? 2 : 1;
			}
		},
		// 取消更新
		cancelUpdate() {
			this.formData = JSON.parse(JSON.stringify(this.userInfo));
			this.flagShowEdit = false;
		},
		// 同步微信头像, 授权不到头像
		updateUserAvatar(e) {
			// #ifdef MP-WEIXIN
			uni.getUserProfile({
				provider: 'weixin',
				desc: "获取微信用户的头像和昵称",
				success: res => {
					console.log('获取微信用户信息成功', res);
					userApi.updateUser({
						user: { avatar: res.userInfo.avatarUrl, name: res.userInfo.nickName},
						success: (res) => {
							this.flagShowEdit = false
							this.getUserInfo()
						}
					});
				},
				fail: res => {
					uni.showModal({
						title: res ? res.errMsg : '拒绝',
						content: '您取消了授权，请重新授权微信信息',
						showCancel: false,
					})
				}
			});
			// #endif
		},
		// 提交更新
		updateUserInfo() {
			let err = '';
			if (this.formData.name.length === 0) {
				err = '姓名不能为空';
			} else if (this.formData.phone.length === 0) {
				err = '手机不能为空';
			}
			if (err !== '') {
				this.$msg(err);
				return;
			}

			userApi.updateUser({
				user: this.formData,
				success: (res) => {
					this.flagShowEdit = false
					this.$msg(res.msg)
					this.getUserInfo()
				}
			});
		},
		// 退出登录
		logout() {
			userApi.logout({})
			uni.removeStorageSync('token');
			uni.removeStorageSync("userInfo")
			uni.reLaunch({
				url: '/pages/userCenter/index'
			});
		}
	}
};
</script>

<style>
.listCell {
	border-bottom: 1px solid #e6e6e6;
	padding: 10rpx 0;
	display: flex;
}
</style>
